<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<button onclick="fan()">反选</button>
		<button onclick="quan()">全选/全不选</button>
		<ul>
			<li><input type="checkbox" class="check" />aa</li>
			<li><input type="checkbox" class="check" />bb</li>
			<li><input type="checkbox" class="check" />cc</li>
			<li><input type="checkbox" class="check" />dd</li>
		</ul>
		<script type="text/javascript">
			// 点击全选按钮的事件（quan（））
			// 全部选中,用到选择器,class
			// 循环出4个复选框，for (checkbox.length)
			// 在循环中改变复选框选中状态(checked=true)
			function quan() {
				var ch = document.getElementsByClassName('check');
				console.log(ch);
				if(ch[0].checked==true){
					ch[0].checked = false;
				}else{
					ch[0].checked = true;
				}
				for (var i = 0; i < ch.length; i++) {
					console.log(ch[i]);
					ch[i].checked=ch[0].checked;
					//   if (ch[i].checked = true) {	
					// 	ch[i].checked = true;
					// } else {
					// 	ch[i].checked = false;
					// }
				}
			}

			function fan() {
				var ch = document.getElementsByClassName('check');
				for (var i = 0; i < ch.length; i++) {
					console.log(ch[i]);
					if (ch[i].checked != true) {
						ch[i].checked = true;
					} else if (ch[i].checked = true) {
						ch[i].checked = false;
					}
				}
			}
		</script>
	</body>
</html>
